<template>
  <div class="error-tip" :style="tipStyle">
    <el-button
      v-if="widgetConf.config.showBackButton"
      type="primary"
      @click="handleClick"
      >返回</el-button
    >
    <div class="error-tip-main">
      <div class="tip-text">
        <div>
          <h2>Oops!</h2>
          <div>{{ widgetConf.config.errorTxt }}</div>
        </div>
      </div>
      <div class="tip-img">
        <img :src="widgetConf.config.errorimg || defaultErrorimg" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import defaultErrorimg from '@/assets/img/no-permission.svg'
  import { useRouter } from 'vue-router'
  const props = defineProps({
    widgetConf: {
      type: Object,
      require: true
    }
  })
  const tipStyle = computed(() => {
    if (props.widgetConf.config.errorPageHeight) {
      return {
        height: props.widgetConf.config.errorPageHeight
      }
    }
    return {}
  })
  const router = useRouter()
  function handleClick() {
    const backUrl = props.widgetConf.config.backUrl
    if (backUrl) {
      router.push({ path: backUrl })
    } else {
      router.go(-1)
    }
  }
</script>

<style scoped lang="scss">
  .error-tip {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .el-button {
      position: absolute;
      top: 20px;
      left: 20px;
    }
    .error-tip-main {
      display: flex;
      flex: 1;
      > div {
        flex: 1;
        padding: 20px;
      }
      .tip-text {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .tip-img {
        img {
          width: 70%;
        }
      }
    }
  }
</style>
